{include file="common/header"}
<style type="text/css">
    .el-user .list{overflow: auto;height: calc(100vh - 200px);}
    .el-user .list .item{padding:16px 0;position: relative;border-bottom: 1px dashed #eee;}
    .el-user .list .item .details{display: inline-block;vertical-align: middle;}
    .el-user .list .item .title{font-size: 16px;color: #333;display: block;}
    .el-user .list .item .tag{display: inline-block;color: #777;font-size: 14px;margin-right:10px;margin-top: 8px}
    .el-user .list .item .tag i{margin-right: 5px;}
    .el-user .list .item .remove{cursor: pointer;}
    .el-user .list .item .time{color: #777;font-size: 12px;position: absolute;right: 16px;bottom: 16px;}
</style>
<div id="app" v-cloak>
    <div class="el-warp">
        <div class="el-user">
            {include file="user/site"}
            <el-card class="box-card content">
                <el-tabs v-model="tabs">
                    <el-tab-pane label="回复消息" name="comment">
                        <div v-if="tabs === 'comment'" class="list" v-infinite-scroll="commentList" :infinite-scroll-disabled="commentDisabled">
                            <div class="item" v-for="item in commentData">
                                <div class="details">
                                    <a v-if="item.blog" class="title" :href="item.blog.url" target="_blank">{{item.blog.title}}</a>
                                    <a v-else class="title">此篇文章已被删除</a>
                                    <div>
                                        <div class="tag">
                                            <a :href="item.user.url" target="_blank">
                                                <img :src="item.user.cover" style="vertical-align:middle;margin-right:5px;width:25px;">
                                            </a>
                                            {{item.notice}}
                                        </div>
                                        <div class="tag remove" @click="remove(item, index)"><i class="el-icon-close"></i>删除</div>
                                    </div>
                                </div>
                                <div class="time">{{item.create_time}}</div>
                            </div>
                            <div v-if="commentLoading" class="el-loader">加载中...</div>
                            <div v-if="commentNoMore && commentLoading === false" class="el-nomore">没有更多啦</div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="收藏消息" name="collect">
                        <div v-if="tabs === 'collect'" class="list" v-infinite-scroll="collectList" :infinite-scroll-disabled="collectDisabled">
                            <div class="item" v-for="item in collectData">
                                <div class="details">
                                    <a v-if="item.blog" class="title" :href="item.blog.url" target="_blank">{{item.blog.title}}</a>
                                    <a v-else class="title">此篇文章已被删除</a>
                                    <div>
                                        <div class="tag">
                                            <a :href="item.user.url" target="_blank">
                                                <img :src="item.user.cover" style="vertical-align:middle;margin-right:5px;width:25px;">
                                            </a>
                                            {{item.notice}}
                                        </div>
                                        <div class="tag remove" @click="remove(item, index)"><i class="el-icon-close"></i>删除</div>
                                    </div>
                                </div>
                                <div class="time">{{item.create_time}}</div>
                            </div>
                            <div v-if="collectLoading" class="el-loader">加载中...</div>
                            <div v-if="collectNoMore && collectLoading === false" class="el-nomore">没有更多啦</div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="系统消息" name="system">
                        <div v-if="tabs === 'system'" class="list" v-infinite-scroll="systemList" :infinite-scroll-disabled="systemDisabled">
                            <div class="item" v-for="item in systemData">
                                <div class="details">
                                    <a v-if="item.blog" class="title" :href="item.blog.url" target="_blank">{{item.blog.title}}</a>
                                    <a v-else class="title">此篇文章已被删除</a>
                                    <div>
                                        <div class="tag">
                                            <a :href="item.user.url" target="_blank">
                                                <img :src="item.user.cover" style="vertical-align:middle;margin-right:5px;width:25px;">
                                            </a>
                                            {{item.notice}}
                                        </div>
                                        <div class="tag remove" @click="remove(item, index)"><i class="el-icon-close"></i>删除</div>
                                    </div>
                                </div>
                                <div class="time">{{item.create_time}}</div>
                            </div>
                            <div v-if="systemLoading" class="el-loader">加载中...</div>
                            <div v-if="systemNoMore && systemLoading === false" class="el-nomore">没有更多啦</div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</div>
<script type="text/javascript">
    var catalog = {:json_encode(catalog_level(2, 'blog'))};
    new Vue({
        el: '#app',
        data() {
            return {
                url: 'api/blog/userNotice/index',
                tabs: 'comment',
                commentData: [],
                commentSearch:{
                    type: 1,
                    page: 1,
                },
                commentLoading: false,
                collectData: [],
                collectSearch:{
                    type: 2,
                    page: 1,
                },
                collectLoading: false,
                systemData: [],
                systemSearch:{
                    type: 3,
                    page: 1,
                },
                systemLoading: false,
            }
        },
        computed: {
            commentNoMore() {
                return this.commentCount <= this.commentData.length;
            },
            commentDisabled() {
                return this.commentLoading || this.commentNoMore;
            },
            collectNoMore() {
                return this.collectCount <= this.collectData.length;
            },
            collectDisabled() {
                return this.collectLoading || this.collectNoMore;
            },
            systemNoMore() {
                return this.systemCount <= this.systemData.length;
            },
            systemDisabled() {
                return this.systemLoading || this.systemNoMore;
            },
        },
        methods: {
            /**
             * 加载列表
             */
            commentList() {
                let self = this;
                self.commentLoading = true;
                post(self.url, self.commentSearch, function (res) {
                    if (res.status === 'success') {
                        self.commentSearch.page++;
                        self.commentData  = self.commentData.concat(res.data);
                        self.commentCount = res.count;
                    }
                    self.commentLoading = false;
                })
            },
            /**
             * 搜索
             */
            commentSearchList() {
                this.commentSearch.page = 1;
                this.commentData = [];
                this.commentList();
            },
            /**
             * 加载列表
             */
            collectList() {
                let self = this;
                self.collectLoading = true;
                post(self.url, self.collectSearch, function (res) {
                    if (res.status === 'success') {
                        self.collectSearch.page++;
                        self.collectData  = self.collectData.concat(res.data);
                        self.collectCount = res.count;
                    }
                    self.collectLoading = false;
                })
            },
            /**
             * 搜索
             */
            collectSearchList() {
                this.collectSearch.page = 1;
                this.collectData = [];
                this.collectList();
            },
            /**
             * 加载列表
             */
            systemList() {
                let self = this;
                self.systemLoading = true;
                post(self.url, self.systemSearch, function (res) {
                    if (res.status === 'success') {
                        self.systemSearch.page++;
                        self.systemData  = self.systemData.concat(res.data);
                        self.systemCount = res.count;
                    }
                    self.systemLoading = false;
                })
            },
            /**
             * 搜索
             */
            systemSearchList() {
                this.systemSearch.page = 1;
                this.systemData = [];
                this.systemList();
            },
        },
    });
</script>
</body>
</html>